<template>
  <div class="login-container">
    <div class="login-box">
      <h1 class="title">系统登录</h1>
      <el-form
        ref="formRef"
        :model="loginForm"
        :rules="loginRules"
      >
        <!-- 用户输入 -->
        <el-form-item prop="username">
          <el-input 
            v-model="loginForm.username"
            placeholder="请输入用户名"
            prefix-icon="User"
            size="large"
          />
        </el-form-item>
        <!-- 密码输入 -->
        <el-form-item prop="userPwd">
          <el-input 
            v-model="loginForm.userPwd"
            placeholder="请输入密码"
            size="large"
            prefix-icon="Lock"
            type="password"
            show-password
          />
        </el-form-item>
        <!-- 记住我 & 忘记密码 -->
        <div class="login-options">
          <el-checkbox v-model="rememberMe" >记住我</el-checkbox>
          <div class="login-others">
            <el-link type="primary" @click="showForget">忘记密码?</el-link>
            <el-link type="primary" @click="goRegister">注册？</el-link>
          </div>
        </div>
        <el-button
          type="primary"
          size="large"
          class="login-btn"
          :loading="loading"
          @click="handleLogin"
        >
          立刻登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserInfoStore } from '@/stores/userInfo'
const userInfoStore = useUserInfoStore()
import { useRouter } from 'vue-router'
const router = useRouter()

const loading = ref(false)
const rememberMe = ref(false)

//pinia监控状态
userInfoStore.$subscribe((mutation, state) => {
  console.log('userInfoStore updated:', state)
})

const loginForm = ref({
  username: "",
  userPwd: ""
})

const loginRules = {
  username:[
    {required: true, message: '用户名不能为空', trigger: 'blur'},
    {min: 4, max: 15, message: '用户名长度为4-15位', trigger: 'blur'}
  ],
  userPwd:[
    {required: true, message: '用户密码不能为空', trigger: 'blur'},
    {min: 6, max: 15, message: '用户密码为为6-15位', trigger: 'blur'}
  ]
}

const formRef = ref()

//登录函数
const handleLogin = async() => {
  if (!formRef.value) {
      return
  }
  const isValid = await new Promise(
    (resolve)=>{
      formRef.value.validate(
        (valid)=>{
          resolve(valid)
        }
      )
    }
  )
  console.log("login="+isValid)
  try{
    if(isValid){
      console.log("校验成功")
      await userInfoStore.login(loginForm.value)
      loading.value = true
      router.push({name: "HeadlineNews"})
    }else{
      console.log("校验失败")
    }
  }finally{
    loading.value = false
  }
}

//忘记密码
const showForget = () => {
  ElMessage.info("请联系管理员重置密码")
}

//去注册页面
const goRegister = () => {
  router.push({name: "Register"})
}
</script>

<style lang='less' scoped>
.login-container{
  /*
    v === view  视口  浏览器画布 
    vh vw  vmax vmin
  */
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #f8f8f9 0%, #f7f8f8 100%);

  .login-box {
    width: 400px;
    //height: 200px;
    padding: 40px;
    background:  rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);

    .title {
      text-align: center;
      margin-bottom: 30px;
      color: #303133;
      font-size: 24px;
    }

    .login-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 15px 0;

      .login-others{
        display: flex;
        align-items: center;
        gap: 10px;
      }
    }
    
    .login-btn{
      width: 100%;
      margin-top: 48px;
    }
  }
}

</style>